<template>
  <Space style="padding-bottom: 10px">
    <Button size="small" type="primary" icon="md-add" @click="add">添加</Button>
    <Button size="small" type="warning" icon="md-build" @click="edit">编辑</Button>
    <Button size="small" type="error" icon="md-close" @click="del">删除</Button>
  </Space>
  <Transfer
    filterable
    :data="roleList.data"
    :target-keys="targetList.data"
    @on-change="roleHandleChange"
    :operations="['移除', '授予']"
    :titles="['未授予', '已授予']"
    @on-selected-change="roleSel"
    :list-style="listStyle"
  >
    <div :style="{ float: 'right', margin: '5px' }">
      <Button size="small" @click="initRole">刷新</Button>
    </div>
  </Transfer>
  <AddOrUpdate ref="modal" @initRole="initRole"></AddOrUpdate>
</template>
<script setup>
import http from '@/util/http'
import AddOrUpdate from './AddOrUpdate.vue'
import bus from '@/util/bus'
let { proxy } = getCurrentInstance()
let roleList = reactive({ data: [] })
let menuID = reactive({ data: [] })
const emit = defineEmits(['getMenuData', 'getMenu'])
let prop = defineProps({ roleTargetList: [] })
let targetList = reactive({ data: [] })
let modal = ref()
let roleIDs = reactive({ data: [] })
let listStyle = reactive({
  width: '175px',
  height: '300px',
})
const initRole = () => {
  http.get('/Basic/Role/List', {}, (response) => {
    roleList.data = response.data.data
  })
}
initRole()

watch(
  () => prop.roleTargetList,
  (value) => {
    targetList.data = value
  }
)

const roleHandleChange = (newTargetKeys, direction, moveKeys) => {
  menuID.data = []
  if (direction === 'right') {
    emit('getMenuData', {
      fn: (i) => {
        if (i.length === 0) {
          proxy.$Message.warning('请选择菜单中的某个节点！')
          return false
        }
        i.forEach((element) => {
          menuID.data.push(element.id)
        })
        http.post(
          '/Basic/Menu/AddRole',
          { menuID: toRaw(menuID.data), roleID: newTargetKeys },
          (response) => {
            if (response.data.flag) {
              targetList.data = newTargetKeys
              proxy.$Message.success(response.data.msg)
            } else {
              proxy.$Message.error(response.data.msg)
            }
          }
        )
      },
    })
  } else {
    emit('getMenu', {
      fn: (i) => {
        if (i.length === 0) {
          proxy.$Message.warning('请选择菜单中的某个节点！')
          return false
        }
        i.forEach((element) => {
          menuID.data.push(element.id)
        })
        http.post(
          '/Basic/Menu/RemoveRole',
          { menuID: toRaw(menuID.data), roleID: moveKeys },
          (response) => {
            if (response.data.flag) {
              targetList.data = newTargetKeys
              proxy.$Message.success(response.data.msg)
            } else {
              proxy.$Message.error(response.data.msg)
            }
          }
        )
      },
    })
  }
}

const roleSel = (sourceSelectedKeys, targetSelectedKeys) => {
  roleIDs.data = sourceSelectedKeys
}

const add = () => {
  modal.value.show('')
}
const edit = () => {
  if (roleIDs.data.length != 1) {
    proxy.$Message.warning('请选择1个角色进行编辑！')
    return
  }
  modal.value.show(roleIDs.data[0])
}
const del = () => {
  http.post('/Basic/Role/Del', { roleIDs: roleIDs.data }, (response) => {
    if (response.data.flag) {
      initRole()
      proxy.$Message.success(response.data.msg)
    } else {
      proxy.$Message.error(response.data.msg)
    }
  })
}

const getRole = () => {
  bus.emit('Fn', roleList.data)
}
getRole()
</script>